import React, { Component } from 'react'
import { View, Text, StyleSheet, Dimensions } from 'react-native'
import Iconfont from '../iconfont'
import commonStyle from '../../libs/commonStyle'

export default class TabIcon extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    let selected = this.props.focused
    let data = {
      home: {
        title: '首页',
        icon: 'home_line'
      },
      article: {
        title: '转发赚钱',
        icon: 'money'
      },
      recruit: {
        title: '收徒赚钱',
        icon: 'people10geren'
      }
    }
    let param = data[this.props.navigation.state.key]
    return (
      <View style={styles.tabbarContainer}>
        <Iconfont
          name={param.icon}
          style={[commonStyle.f58, selected && { color: '#C30D23' }]}
        />
        <Text
          style={[
            styles.tabbarItem,
            commonStyle.f18,
            selected ? { color: '#C30D23' } : { color: '#999' }
          ]}
        >
          {param.title}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  tabbarContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: Dimensions.get('window').width / 3
  },
  tabbarItem: {
    textAlign: 'center'
  }
})
